<template>
  <div class="right">
    <div class="option short">
      <div class="title">值班人员（播控中心）<img @click="emit('openEdit', 1)" src="/images/ct_edit.png" alt="" class="icon">
      </div>
      <div class="body option1">
        <ul>
          <li v-for="item in duteListBK" :key="item.id">
            <img src="/images/main_avatar.png" alt="">
            <div>
              <span>{{ item.post }}</span>
              <span>姓名：{{ item.name }}</span>
              <span>电话：{{ item.phone }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="option long">
      <div class="title">分控工作人员（分控中心）<img @click="emit('openEdit', 2)" src="/images/ct_edit.png" alt="" class="icon">
      </div>
      <div class="body option1">
        <ul>
          <li v-for="item in duteListFK" :key="item.id">
            <img src="/images/main_avatar.png" alt="">
            <div>
              <span>{{ item.post }}</span>
              <span>姓名：{{ item.name }}</span>
              <span>电话：{{ item.phone }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="option" style="height: 22%;">
      <div class="title">大屏分布类型<img @click="emitScreen" src="/images/ct_edit.png" alt="" class="icon"></div>
      <div class="body">
        <div class="table" ref="option1$"></div>
      </div>
    </div>
    <div class="option" style="height: 29%;">
      <div class="title">屏幕实时监控<img @click="emit('openSelect')" src="/images/ct_edit.png" alt="" class="icon"></div>
      <div class="searchsw">
        <div>{{ currentUrlItem.name }}</div>
        <div class="seach">
          <img class="bg" src="/images/main_searchbg.png" alt="">
          <input @keypress.enter="searchDevice" v-model="searchName" placeholder="搜索" type="text">
          <img @click="searchDevice" class="search-icon" src="/images/main_search.png" alt="">
        </div>
      </div>
      <div class="body option3">
        <img @click="clickLeft" src="/images/arrowl.png" alt="">
        <div @click="emit('clickItem',currentUrlItem)">
          <iframe  :src="currentUrlItem.url" frameborder="0"></iframe>
        </div>
        <img @click="clickRight" src="/images/arrowr.png" alt="">
      </div>
    </div>
  </div>

</template>

<script setup>
import { onMounted, defineProps, ref, watch, nextTick } from "vue";
import axios from 'axios';

import * as echarts from 'echarts';

// const IP = 'http://192.168.204.13'
const DOMINIP = ''
// const DOMINIP = 'http://18666186515.wicp.vip'


const IP = window.location.protocol + '//' + window.location.hostname

const jiankongDomain = DOMINIP + '/mediamtx/v3'

// const DOMINIP = ''
const emit = defineEmits(["openEdit", "confirm"]);

const props = defineProps({
  carouselList: Array,
  duteListFK: Array,
  screenList: Array,
  duteListBK: Array
})


const MAPPLAY = {
  0: '其他',
  1: '专题片',
  2: '小短片',
  3: '文字条',
  4: '视频节目',
  5: '海报',
  6: '其他',
}

let urlList = []
let screenList = []

let lunboTimer = null

let option1$ = ref(null)
let searchName = ref('')
let currentUrlItem = ref({
  id: 'stream01',
  name: '',
  url: ''
})

let searchDevice = () => {
  if (searchName.value) {
    currentUrlItem.value = urlList.find(item => {
      return item.name.indexOf(searchName.value) > -1
    });

    console.log(currentUrlItem.value)
  } 
}

let clickLeft = () => {
  let idx = urlList.findIndex(item => item.id == currentUrlItem.value.id)
  idx--
  if (idx < 0) {
    currentUrlItem.value = urlList[urlList.length - 1]
  } else {
    currentUrlItem.value = urlList[idx]
  }
}

let clickRight = () => {
  let idx = urlList.findIndex(item => item.id == currentUrlItem.value.id)
  idx++
  if (idx > urlList.length - 1) {
    currentUrlItem.value = urlList[0]
  } else {
    currentUrlItem.value = urlList[idx]
  }
}

let emitScreen = ()=>{
  emit('openBigScreen',props.screenList)
}

let getScreenPublicity = async (list) => {
  // let result = (await axios.post(DOMINIP + '/gy/att-screen-distribution/list')).data

  let titles = []
  let series = []
  list.forEach(item => {
    titles.unshift(item.type)
    series.unshift(item.count)
  })


  var chart1 = echarts.init(option1$.value);
  chart1.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {},
    grid: {
      left: '3%',
      right: '10%',
      bottom: '10%',
      top: "10%",
      containLabel: true
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
      axisLine: {
        show: true
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        color: '#9ba3c8',
        fontSize: 10
      }
    },
    yAxis: {
      type: 'category',
      data: titles,
      splitLine: {
        show: true,
        lineStyle: {
          color: '#21344a'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#9ba3c8',
        fontSize: 10
      }
    },
    series: [
      {
        type: 'bar',
        data: series,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: 'rgba(47, 142, 232,1)'
            },
            {
              offset: 1,
              color: 'rgba(14, 88, 237,1)'
            }
          ])
        },
        label: {
          show: true,
          position: 'right', // 标签位置，可选值：'top'、'insideTop'、'inside'、'insideBottom' 等
          color: '#9ba3c8', // 标签文字颜色
          fontSize: 12, // 标签文字大小
          fontWeight: 'bold', // 标签文字粗细
          formatter: '{c}' // 标签内容格式化，{c} 表示数据值
        },
        barWidth: 12
      }
    ]
  });


}



let deleteMonitor = async (name) => {
  try {
    await axios.delete(jiankongDomain + '/config/paths/delete/' + name)
  } catch (error) {
  } finally {
  }
}


let addMonitor = async (url, name) => {
  await deleteMonitor(name)
  axios.post(jiankongDomain + '/config/paths/add/' + name, {
    source: url,
    overridePublisher: true
  })
}


watch(() => props.carouselList, () => {
  urlList = props.carouselList.map((item, index) => {
    let xulie = index + 1
    let streamName = 'stream' + xulie
    return {
      ...item,
      streamName,
      url: IP + ":8877/cn/demo-easy.html?width=380&height=180&streamType=2&ip=" + item.ip
    }
  })
  // urlList.forEach(item => {
  //   addMonitor(`rtsp://admin:HK888888@${item.ip}/h264/ch1/sub/av_stream`, item.streamName)
  // })
  console.log('urlList',urlList)
  currentUrlItem.value = urlList[0] || {}
}, {
  immediate: true,
  deep: true
})


watch(() => props.screenList, () => {
  getScreenPublicity(props.screenList)
}, {
  immediate: true,
  deep: true
})

onMounted(() => {
  nextTick(() => {
    lunboTimer && clearInterval(lunboTimer)
    lunboTimer = setInterval(() => {
      clickRight()
    }, 20 * 1000);
  })
})


</script>

<style lang="scss" scoped>
.right {
  width: 22%;
  max-width: 800px;
  position: absolute;
  right: 10px;
  top: 8.5%;
  height: 91%;
  z-index: 99;

  .option {
    width: 100%;
    height: 24%;
    background-size: 100% 100%;
    border: 2px solid rgba(65, 141, 255, 0.15);
    text-align: center;
    margin-bottom: 2%;
    border-radius: 8px;
    background-color: rgba(7, 20, 36, 0.7);

    .title {
      color: #fff;
      padding: 8px 0;
      font-size: 16px;
      margin-top: -1px;
      font-weight: bold;
      font-style: italic;
      letter-spacing: 2px;
      background: url('/images/ctitbg.png') no-repeat;
      background-size: 100% 100%;
      position: relative;

      .icon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 10px;
        width: 35px;
        cursor: pointer;
      }
    }

    .searchsw {
      width: 100%;
      color: #fff;
      display: flex;
      padding: 10px 10px 0;
      justify-content: space-between;
      align-items: center;
      height: 18%;

      .seach {
        width: 50%;
        position: relative;
        right: 10px;
        .bg {
          width: 100%;
        }

        .search-icon {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 10px;
          cursor: pointer;
          width: 12px;
        }

        >input {
          position: absolute;
          color: #fff;
          left: 14px;
          letter-spacing: 1px;
          width: 80%;
          background: none;
          border: none;
          outline: none;
          background: none;
          appearance: none;
          top: 50%;
          transform: translateY(-50%);
          font-size: 12px;
          height: 14px;

          &::placeholder {
            font-style: italic;
            color: #bad2ec;
          }
        }
      }
    }

    .body {
      height: 85%;

      .op1 {
        width: 100%;
        height: 100%;
        position: relative;
      }

      .table {
        width: 100%;
        height: 100%;
      }

      .txtcenter {
        position: absolute;
        color: #fff;
        font-size: 12px;
        transform: translateX(-50%);
        left: 50%;
        top: 35%;

        >div {
          line-height: 1.5;
          opacity: 0.7;

          >span {
            margin-left: 2px;
          }
        }
      }
    }

    .option1 {
      padding: 5px 10px 0 10px;
      color: #fff;
      position: relative;
      height: 87%;
      >ul {
        height: 98%;
        overflow-y: auto;
        flex-wrap: wrap;
        display: flex;
        align-items: flex-start;

        >li {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 48%;
          margin: 0 1% 1%;
          padding: 4px 8px;
          background-size: 100% 100%;
          border: 1px solid rgba(65, 141, 255, 0.15);
          border-radius: 8px;

          >img {
            width: 22%;
            height: auto;
          }

          >div {
            width: 70%;
            margin-left: 5%;
            display: flex;
            flex-direction: column;
            align-items: center;

            >span {
              text-align: left;
              width: 100%;
              font-size: 10px;
              line-height: 1.2;
              color: rgba(255, 255, 255, 0.6);

              &:first-of-type {
                font-size: 12px;
                margin-bottom: 2px;
                font-weight: bold;
                color: rgba(255, 255, 255, 1);
              }
            }
          }
        }
      }
    }

    .option3 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 67%;

      >img {
        width: 10%;
        height: auto;
        margin: 0 10px;
        cursor: pointer;
      }

      >div {
        width: 80%;
        height: 88%;
        cursor: pointer;
        >iframe{
          width: 100%;
          height: 100%;
          pointer-events: none;
        }
      }
    }
  }

  .short {
    height: 15%;
    overflow: hidden;
  }

  .long {
    height: 30%;
    overflow: hidden;
  }
}
</style>